 <template>
  <div class="box">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="280"> </el-table-column>

      <el-table-column prop="address" label="地址">
        <el-button type="primary" size="default">地址</el-button>
      </el-table-column>
      <el-table-column prop="name" label="性别">
        <template #default="{ row }">
          <p>{{ tx(row.x) }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <p>{{ row }}</p>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin: 20px">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="1000"
        @current-change="cg"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

  <script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        x: 1,
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        x: 2,
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        x: 2,
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        x: 1,
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    tx (t) {
      // 映射关系
      const ys = { 1: '男', 2: '女' }
      return ys[t]
    },
    cg (page) {
      console.log(page)
      this.tableData = [{
        date: '2016-05-02',
        name: '王小虎',
        x: 1,
        address: '上海市普陀区金沙江路 1518 弄'
      },]
    }
  },
}
  </script>

<style lang="less" scoped>
</style>